<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/echarts/echarts.js"></script>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/js/operateIndex.js"></script>
</head>
<body style="background-color: #F9F9F9">
    <!--导航栏-->
    <div class="layui-row" style="margin-left: 26px">
        <div class="layui-col-xs11 layui-col-sm11 layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header" style="background-color: #F1F1F1;">
                    <p class="fl">系统首页</p>
                    <div class="fr" style="margin: 0 20px 20px 0">
                        <button type="button" class="layui-btn layui-btn layui-btn-sm">
                            <i class="layui-icon layui-icon-refresh-1"></i>
                            刷新
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="content">
    <!-- <blockquote class="layui-elem-quote">
         <span class="username" style="color:dimgrey;"></span>
         <button type="button" class="layui-btn" style="float: right; margin: -8px 100px 0px 0px;">
             <i class="layui-icon">&#xe669</i>刷新</button>
     </blockquote>-->
    <!--头部-->
    <div class="layui-row">
        <div class="layui-col-xs9 layui-col-sm9 layui-col-md9" id="header" class="layui-btn-container">
            <div class="head_box">
                    <span class="fl">
                        <i class="layui-icon layui-icon-camera" style="font-size: 50px; color: #0DAB9D;"></i>
                    </span>
                <span class="fl">
                        <p>上传视频总数</p>
                        <span id="uploadVideo">200</span>
                </span>
            </div>
            <div class="head_box">
                    <span class="fl">
                        <i class="layui-icon layui-icon-read" style="font-size: 50px; color: #0DAB9D;"></i>
                    </span>
                <span class="fl">
                        <p>视频浏览数</p>
                        <span id="lookNum">200</span>
                    </span>
            </div>
            <div class="head_box">
                    <span class="fl">
                        <i class="layui-icon layui-icon-star" style="font-size: 50px; color: #0DAB9D;"></i>
                    </span>
                <span class="fl">
                        <p>视频收藏量</p>
                        <span id="collectNum">200</span>
                    </span>
            </div>
            <div class="head_box" style="margin: 0;">
                    <span class="fl">
                        <i class="layui-icon layui-icon-praise" style="font-size: 50px; color: #0DAB9D;"></i>
                    </span>
                <span class="fl">
                        <p>视频点赞量</p>
                        <span id="likeNum">200</span>
                    </span>
            </div>
        </div>
    </div>
    <!--待处理事务-->
    <div class="layui-row">
        <div class="layui-col-xs9 layui-col-sm9 layui-col-md9"  id="pending_transactions">
            <div class="top">
                <p>待处理事务</p>
            </div>
            <div class="fl bottom course" style="margin-right: 40px;">
                <div id="curriculumToExamineHref2" onclick="jump()">
                    <a class="fl">课程待审核信息</a>
                    <p class="fr">(<span id="course_to_examine" style="color: #F04844;">10</span>)</p>
                </div>
            </div>
            <div class="fl bottom product">
                <div id="commodityToExamineHref2" onclick="jump()">
                    <a  class="fl">商品待审核信息</a>
                    <p class="fr">(<span id="product_to_examine" style="color: #F04844;">10</span>)</p>
                </div>
            </div>
        </div>
    </div>
    <!--运营快捷入口-->
    <div class="layui-row">
        <div class="layui-col-xs9 layui-col-sm9 layui-col-md9 div_md"  id="operate" >
            <div class="top">
                <p>运营快捷入口</p>
            </div>
            <ul class="bottom">
                <a onclick="jump()" id="accountSettings">
                    <li>
                        <div>
                            <i class="layui-icon layui-icon-set-fill" style="font-size: 60px; color: #0DAB9D;"></i>
                            <p>账户设置</p>
                        </div>
                    </li>
                </a>
                <a onclick="jump()" id="microCircleCommentHref">
                    <li>
                        <div>
                            <i class="layui-icon layui-icon-dialogue" style="font-size: 60px; color: #0DAB9D;"></i>
                            <p>
                                微圈评论
                            </p>
                        </div>
                    </li>
                </a>
                <a onclick="jump()" id="curriculumCommentHref">
                    <li>
                        <div>
                            <i class="layui-icon layui-icon-reply-fill" style="font-size: 60px; color: #0DAB9D;"></i>
                            <p>
                                课程评论
                            </p>
                        </div>
                    </li>
                </a>
                <a onclick="jump()" id="curriculumListHref">
                    <li>
                        <div>
                            <i class="layui-icon layui-icon-template-1" style="font-size: 60px; color: #0DAB9D;"></i>
                            <p>
                                课程列表
                            </p>
                        </div>
                    </li>
                </a>
                <a onclick="jump()" id="microCircleList" >
                    <li>
                        <div>
                            <i class="layui-icon layui-icon-read" style="font-size: 60px; color: #0DAB9D;"></i>
                            <p>
                                微圈列表
                            </p>
                        </div>
                    </li>
                </a>
                <a onclick="jump()" id="curriculumToExamineHref">
                    <li>
                        <div>
                            <i class="layui-icon layui-icon-search" style="font-size: 60px; color: #0DAB9D;"></i>
                            <p>
                                课程审核
                            </p>
                        </div>
                    </li>
                </a>
                <a onclick="jump()" id="microCircleToExamineHref">
                    <li>
                        <div>
                            <i class="layui-icon layui-icon-search" style="font-size: 60px; color: #0DAB9D;"></i>
                            <p>
                                微圈审核
                            </p>
                        </div>
                    </li>
                </a>
                <a onclick="jump()" id="toExamineLogHref">
                    <li>
                        <div>
                            <i class="layui-icon layui-icon-survey" style="font-size: 60px; color: #0DAB9D;"></i>
                            <p>
                                审核日志
                            </p>
                        </div>
                    </li>
                </a>
            </ul>
        </div>
    </div>
    <!--商品总览-->
    <div class="layui-row">
        <div class="layui-col-xs9 layui-col-sm9 layui-col-md9"  id="overview">
            <div class="fl">
                <div class="top">商品总览</div>
                <div class="bottom">
                    <div class="fl">
                        <p class="red" id="courseGoOnline">100</p>
                        <p>课程数量&nbsp;&nbsp;(已上架)</p>
                    </div>
                    <div class="fr">
                        <p class="red" id="productGoOnline">400</p>
                        <p>商品数量 &nbsp;(已上架)</p>
                    </div>
                </div>
            </div>
            <div class="fr">
                <div class="top">用户总览</div>
                <div class="bottom">
                    <div class="fl">
                        <p class="red" id="beforeUserToday">100</p>
                        <p>今日新增</p>
                    </div>
                    <div class="fl">
                        <p class="red" id="beforeUserYesterDay">200</p>
                        <p>昨日新增</p>
                    </div>
                    <div class="fl">
                        <p class="red" id="beforeUserThisMount">1000</p>
                        <p>本月新增</p>
                    </div>
                    <div class="fr">
                        <p class="red" id="beforeUserCount">5000 </p>
                        <p>全部用户</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--课程统计-->
    <div class="layui-row">
        <div class="layui-col-xs9 layui-col-sm9 layui-col-md9" id="course">
            <div class="top">
                <p>课程统计</p>
            </div>
            <div class="middle">
                <p class="today fl borderBottom" onclick="getDataEcharts('getCourseHours')">今天</p>
                <p class="week fl" onclick="getDataEcharts('getCourseWeek')">本周</p>
                <p class="month fl" onclick="getDataEcharts('getCourseDay')">本月</p>
            </div>
            <div class="bottom">
                <div class="fl">
                    <div>
                        <p>本月新增课程总数</p>
                        <p id="monthSum" style="font-size: 30px; color: #666666">0</p>
                        <span id="monthSumRate" class="fl" style="color: #00A950;">-0.45%</span>
                        <p class="fr" style="color: #666;">同比上月</p>
                    </div>
                    <div style="margin-top: 30px">
                        <p>本周申请成功</p>
                        <p id="monthAdoptSum" style="font-size: 30px; color: #666666">0</p>
                        <span id="monthAdoptSumRete" class="fl" style="color: #F04844;">-0.45%</span>
                        <p class="fr" style="color: #666;">同比上月</p>
                    </div>
                </div>
                <div id="linear"></div>
            </div>
        </div>
    </div>
</div>
</body>
    <script>
        getDataEcharts('getCourseHours');
        function getDataEcharts(data) {
            if (data == 'getCourseHours'){
                $('.today').addClass('borderBottom');
                $('.week').removeClass('borderBottom');
                $('.month').removeClass('borderBottom');
            }else if (data == 'getCourseWeek'){
                $('.week').addClass('borderBottom');
                $('.today').removeClass('borderBottom');
                $('.month').removeClass('borderBottom');
            }else if (data == 'getCourseDay'){
                $('.month').addClass('borderBottom');
                $('.week').removeClass('borderBottom');
                $('.today').removeClass('borderBottom');
            }
            $.ajax({
                url: '/OIndex/'+data,
                dataType:'json',
                success:function (data) {
                    getEcharts(data.data.data, data.data.list);
                }
            });
        }

        function getEcharts(amount, flag) {

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('linear'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {},
                legend: {
                    data: ['课程量'],
                    bottom: 10
                },
                xAxis: {
                    data: flag
                },
                yAxis: {},
                series: [
                    {
                        name: '课程量',
                        type: 'line',
                        data: amount,
                        // 点的颜色。
                        itemStyle: {color: 'rgb(13, 171, 158)'},
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        }
        function jump() {

        }
    </script>
</html>
